/**
 * 顶部导航栏
 */
'use strict'
import React, {Component} from 'react';
import {connect} from 'dva';
import {Picker, WingBlank} from "antd-mobile";
import {district} from 'antd-mobile-demo-data';
import arrayTreeFilter from 'array-tree-filter';

class CityPicker extends Component {
  state = {
    visible: false,
  };

  render() {
    const {value, dispatch} = this.props;
    const {visible} = this.state;
    return (
      <Picker
        visible={visible}
        data={district}
        value={value}
        onChange={v => dispatch({type: 'home/city', city: v})}
        onOk={() => this.setState({visible: false})}
        onDismiss={() => this.setState({visible: false})}
        format={(labels) => <div>{labels[labels.length - 1]}</div>}
      >
        <ShowCity onClick={() => this.setState({visible: true})}/>
      </Picker>
    );
  }

  getSel() {
    const value = this.state.pickerValue;
    if (!value) {
      return '';
    }
    const treeChildren = arrayTreeFilter(district, (c, level) => c.value === value[level]);
    return treeChildren.map(v => v.label).join(',');
  }
}

CityPicker.propTypes = {};

const opts = ({home}) => {
  const {city} = home || {};
  return {
    value: city,
  };
};
export default connect(opts)(CityPicker);

const ShowCity = (props) => {
  const {onClick, extra} = props;
  return <div onClick={onClick} className="am-search">
    <WingBlank size="sm">
      {!!extra.props.children ? extra : '校区'}
    </WingBlank>
  </div>;
}
